<script setup>
import { showToast, buttonProps } from 'vant';
</script>
<template>
    <div class="login-box">
        <van-nav-bar
            title="登录页"
            left-text="返回"
            left-arrow
            @click-left="onClickLeft"
            @click-right="onClickRight"
            />
        <div align="center"><img src="../img/小房子.png" style="width: 250px;height: 180px;"></div>
        <div class="login_choice"><img src="../img/DD.png" style="width: 30px;height: 25px;margin-right: 10px;"><span>钉钉</span></div>      
        <div class="login_choice"><img src="../img/WX.png" style="width: 30px;height: 25px;margin-right: 10px;"><span>微信</span></div>      
        <div class="login_choice"><img src="../img/手机.png" style="width: 30px;height: 25px;margin-right: 6px;"><span>手机</span></div> 
        <div style="text-align: center; margin-top: 5px;display: flex;align-items: center;justify-content: center;">
            <span style="position: relative; left: 0; top: 50%; width: 40%; height: 1px; background-color: #ccc;"></span>&nbsp;&nbsp;
            <span style="z-index: 1;">or</span>&nbsp;&nbsp;        
            <span style="position: relative; right: 0; top: 50%; width: 40%; height: 1px; background-color: #ccc;"></span>
        </div>
        <div class="button_on"> 
        <van-button type="success" style="width: 300px;border-radius: 20px;margin-top: 10px;">账号密码登录</van-button>
        </div>    
    </div>
</template>
<style scoped>
.login-box{
    top: 100px;
    transform: translate(-50%);
    left: 50%;
    position: relative;
    width: 360px;
    height: 600px;
    background-color: #fff;
    /* 添加外边框 */
    border: 1px solid #ccc; /* 这里边框颜色设置为灰色，你可以根据喜好调整 */
    /* 添加圆角 */
    border-radius: 10px; /* 可以调整圆角的弧度值，这里设置为10px */
    /* 添加阴影 */
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); /* 水平偏移0，垂直偏移0，模糊半径5px，颜色为半透明黑色 */
    background-color: rgb(238, 249, 246);
}
.login_choice{
    height: 50px;
    width: 320px;
    border: 1px solid #ccc;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    margin-top: 20px;
}
.button_on{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 15px;
}
</style>